<template>
    <div>
        <div class="login">
            <table>
                <tr>
                    <td>
                        <label for="a1">用户名:</label>
                    </td>
                    <td>
                        <input type="text" name id="a1" v-model="user.account" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="a2">密码:</label>
                    </td>
                    <td>
                        <input type="password" v-model="user.password" />
                    </td>
                </tr>
            </table>

            <button @click="login()">登录</button>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const { mapActions } = createNamespacedHelpers("loginModules")
export default {
    data() {
        return {
            user: {
                account: '',
                password: ''
            }
        }
    },
    methods: {
        ...mapActions(['asyncLogin']),
        async login() {
            const res = await this.asyncLogin(this.user)
            if (res.code) {
                this.$message({
                    message: "恭喜你登录成功",
                    type: "success",
                });
                this.$router.replace('/home')
            } else {
                this.$message({
                    message: "账号或密码错误",
                    type: "success",
                });
            }
        }

    }
}
</script>

<style lang='scss' scoped>
.login {
    background-color: pink;
    margin: 300px 600px;
}
</style>
